<template>
  <div class="box">
    <h4>Child3</h4>
    <div>------------------------------------------------------</div>
    <div>modelValue: {{ modelValue }}</div>
    <input type="text" :value="modelValue" @input="modelValueHandler">
    <div>------------------------------------------------------</div>
    <div>text: {{ text }}</div>
    <input type="text" :value="text" @input="textHandler">
  </div>
</template>

<script lang="ts" setup>

defineProps<{
  modelValue: string,
  text: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', qwer: string): void,
  (e: 'update:text', qwer: string): void
}>()

const modelValueHandler = (e: Event) => {
  emit('update:modelValue', (e.target as HTMLInputElement).value  )
}

const textHandler = (e: Event) => {
  emit('update:text', (e.target as HTMLInputElement).value )
}

</script>
